<template>
	<view class="content">
		<!-- 吸顶 view -->
		<view class="fixed-top-view">
			<!-- 排序 -->
			<view class="graceSelectMenuItem" @tap="orderBySellNumber">
				<text class="gui-block-text gui-text gui-text-center"
					:style="{color:orderIndex == 1 ? activeColor : defColor}">最新</text>
			</view>
			<view class="graceSelectMenuItem">
				<gui-order @change="priceOrder" :orderBy="orderByIndex" :limit="[1,2]">
					<text class="gui-text gui-block-text"
						:style="{color:orderIndex == 2 ? activeColor : defColor}">填表时间</text>
				</gui-order>
			</view>
			<view class="graceSelectMenuItem" @tap="showScreening">
				<text class="gui-text gui-block-text gui-text-center gui-icons">筛选 &#xe686;</text>
			</view>
		</view>

		<view class="" style="">

			<view v-if="!show_data.length" class="gui-text-center">
				无更多数据
			</view>

			<view style="width: 100%;">
				<view style="padding: 0 25rpx; padding-top: 100rpx;">
					<view class="gui-list-items" v-for="(item, index) in show_data" :key="index">
						<view v-if="data_query.sh_type == '0'">
							<image src="@/static/activity/apply/pick_yes.png" style='width: 40rpx;height: 40rpx;'
								v-if="check_arr.indexOf(item.id) > -1" @tap="chose_arr(0,item.id)"></image>
							<image src="@/static/activity/apply/pick_no.png" style='width: 40rpx;height: 40rpx;' v-else
								@tap="chose_arr(1,item.id)"></image>
						</view>
						<view class="gui-list-body" style="border-bottom: 1rpx solid white; font-size: 30rpx;"
							@tap="to_sh(item.id)">
							<view class="gui-list-title">
								<view style="display: flex;flex-direction: column;">
									<text class="gui-color-red">{{item.category_name}}-({{item.member}})</text>
									<text class="gui-color-red" v-if="item.money">
										审核金额: {{Array.isArray(item.money) ? item.money[0] + '|' + item.money[1] : item.money}}
									</text>
									<text class="gui-color-red" v-else>
										编号: {{item.id}}
									</text>
								</view>
								<text v-if="item.cate">{{item.cate.name}}</text>
								<text v-else>(已下线)</text>
							</view>

							<text class="gui-list-body-desc gui-color-gray">填表时间 : {{item.created_at}}</text>
							<text class="gui-list-body-desc gui-color-gray">于 {{item.updated_at}} 更新</text>
						</view>
					</view>
				</view>
				<view style="height: 100rpx;"></view>
			</view>

			<view v-if="no_more" class="gui-color-gray gui-text-center" style="margin: auto;width: 480rpx;">
				<text>无更多数据</text>
			</view>

			<!-- 右侧弹出筛选 -->
			<gui-popup ref="guipopupright" position="right" width="580rpx" :top="rightAraeTop" style="z-index: 1;">
				<view class="gui-bg-white right-area gui-box-shadow">
					<scroll-view :scroll-y="true" :style="{height:rightAraeHeight+'px'}">
						<view style="padding-left:25rpx; padding-right:25rpx;">
							<view class="gui-margin-top" style="margin-top: 100rpx;">
								<text class="gui-text gui-color-gray">申请单分类 : </text>
							</view>
							<view style="margin-top:15rpx;" class="">
								<button v-for="(item,index) in cate_arr" v-if="item.name != '微创新' && item.name != '岗位创新'"
									:class="data_query.cate_type==item.id ? 'gui-bg-red' : ''" @tap="change2(item.id)"
									style="border: black solid 1rpx; margin-top: 15rpx; font-size: 28rpx;"
									:key="index">{{item.name}}</button>
							</view>
							<view class="gui-margin-top" style="">
								<text class="gui-text gui-color-gray" style="font-size: 30rpx;">审批状态 : </text>
							</view>
							<view style="margin-top:15rpx;font-size: 28rpx;"
								class="gui-flex gui-rows gui-nowrap gui-align-items-center">
								<button :class="data_query.sh_type==1 ? 'gui-bg-red' : ''" @tap="change1(1)"
									style="border: black solid 1rpx; font-size: 28rpx;">已审核</button>
							</view>

							<view class="gui-margin-top">
								<text class="gui-text gui-color-gray" style="font-size: 30rpx;">姓名 :</text>
							</view>
							<view style="margin-top:15rpx;" class="gui-rows gui-nowrap gui-align-items-center">
								<input v-model="data_query.name" class="gui-form-input gui-border-radius" type="text"
									name="name" id="name" placeholder="查询用户名"
									style="border: #ACACAC solid 1rpx;padding: 10rpx;">
							</view>

							<view class="gui-margin-top">
								<text class="gui-text gui-color-gray" style="font-size: 30rpx;">厂牌号 :</text>
							</view>
							<view style="margin-top:15rpx;" class="gui-rows gui-nowrap gui-align-items-center">
								<input v-model="data_query.lg_id" class="gui-form-input gui-border-radius" type="text"
									name="lg_id" id="lg_id" placeholder="查询厂牌号"
									style="border: #ACACAC solid 1rpx;padding: 10rpx;">
							</view>


							<view class="gui-margin-top">
								<text class="gui-text gui-color-gray" style="font-size: 30rpx;">更新时间 : </text>
							</view>
							<view class="margin-top:15rpx;">
								<view class="gui-form-item gui-margin-top gui-border-b" @tap="openCalendar1">
									<text class="gui-form-label">开始时间</text>
									<view class="gui-form-body">
										<input type="text" class="gui-form-input" :disabled="true" v-model="star_time"
											name="name1" placeholder="请选择日期" />
									</view>
									<text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe603;</text>
								</view>
								<view class="gui-form-item gui-margin-top gui-border-b" @tap="openCalendar2">
									<text class="gui-form-label">结束时间</text>
									<view class="gui-form-body">
										<input type="text" class="gui-form-input" :disabled="true" v-model="end_time"
											name="name2" placeholder="请选择日期" />
									</view>
									<text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe603;</text>
								</view>
							</view>
						</view>
						<view class="right-area-footer gui-flex gui-rows gui-nowrap" style="margin-top: 40rpx;">
							<view class="right-area-footer-btn" hover-class="gui-tap" @tap="screeningReset">
								<text class="right-area-footer-btn gui-block-text gui-color-gray">重置</text>
							</view>
							<view class="right-area-footer-btn gui-bg-red" hover-class="gui-tap" @tap="screeningSubmit">
								<text class="right-area-footer-btn gui-block-text gui-color-white">提交</text>
							</view>
						</view>
					</scroll-view>
				</view>
			</gui-popup>

			<!-- 居中弹出 -->
			<gui-popup ref="guipopup1">
				<view class="gui-relative gui-box-shadow gui-bg-white" style="padding: 20rpx;">
					<!-- <gui-image src="https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/16.png" :width="580"></gui-image> -->
					<text class="gui-text gui-color-red gui-h6" style="">注 : 多选审核签名为上一次审核时上传的签名，无签名则先进行一次单一审核</text>

					<view class="gui-margin-top gui-bg-gray">
						<!-- <image :src="'https://jf.boyaltd.cn/hzj_apply/' + user.id + user.name + '.png'" mode="widthFix"
							@error='imageError'></image> -->
						<image :src="'https://jf.lgwisdomunion.cn/hzj_apply/' + user.id + user.name + '.png'"
							mode="widthFix" @error='imageError'></image>
					</view>

					<view class="gui-margin-top">
						<radio-group @change="radioChange" class="gui-flex">
							<view class="">
								<radio value="0" :checked="is_radio === 0" /><text>不通过</text>
							</view>
							<view class="" style="margin-left: 20rpx;">
								<radio value="1" :checked="is_radio === 1" /><text>通过</text>
							</view>
						</radio-group>
					</view>

					<view class="gui-margin-top gui-form-item gui-border-b">
						<text class="gui-form-label">审核意见 : </text>
						<view class="gui-form-body">
							<input type="text" class="gui-form-input" v-model="formData.approver_opinion" name="opinion"
								@input="inputting" placeholder="请输入审核意见" />
						</view>
					</view>

					<view class="gui-margin-top gui-form-item gui-border-b">
						<text class="gui-form-label">审核金额: </text>
						<view class="gui-form-body">
							<input type="text" class="gui-form-input" v-model="formData.ps" name="ps" @input="inputting"
								placeholder="请输入审核金额" />
						</view>
					</view>


					<view class="gui-margin-top">
						<button class="gui-bg-blue gui-color-white" style="" @tap="sh_sumbit">确认审核</button>
					</view>
					<!-- 关闭按钮 -->
					<text class="gui-block-text demo-close gui-icons gui-color-white gui-absolute-rt"
						@tap.stop="close1">&#xe78a;</text>
				</view>
			</gui-popup>

			<gui-calendar ref="guicalendar1" @confirm="changeDate1" :isTime="false" :zIndex='999'></gui-calendar>
			<gui-calendar ref="guicalendar2" @confirm="changeDate2" :isTime="false" :zIndex='999'></gui-calendar>

		</view>

		<view class="dibu">
			<Zfoot style="width: 100%;"></Zfoot>
			<view @tap="arr_sh_open()" class="gui-text-center gui-bg-blue"
				style="width: 50%;border-left: #acacac solid 1rpx;" hover-class="gui-tap">
				<text class="gui-text gui-footer-large-button-text gui-color-white">多选审核</text>
			</view>

		</view>

	</view>
</template>

<script>
	import Zfoot from "./foot.vue";
	export default {
		components: {
			Zfoot
		},
		data() {
			return {
				no_more: false,
				pageLoading: false,
				count_data: [],
				star_time: "请选择开始时间",
				end_time: "请选择结束时间",
				show_data: [],
				pages: 1,
				price_type: 0,
				apiLoadSta: false,
				// 价格排序索引
				orderByIndex: 0,
				// 排序索引
				orderIndex: 0,
				// 默认颜色
				defColor: '#2B2E3D',
				// 选中颜色
				activeColor: '#FF0036',
				sizeSed: null,
				// 右侧区高度
				rightAraeHeight: 790,
				// 右侧弹出层 top 值
				rightAraeTop: 0,
				order_data: {
					card_id: "",
					id: "",
					name: "",
					dt: "",
					money: 0,
				},
				user: [],
				data_query: {
					sh_type: 0,
					name: '',
					lg_id: ''
				},
				cate_arr: [],
				check_arr: [], //多选审核-已选择
				formData: {
					'approver_opinion': '',
					'is_radio': 1,
					'qm': '',
					'is_number': 0,
					'a_id': 0
				},
				is_radio: 1, //是否通过
			}
		},
		onLoad() {
			this.user = uni.getStorageSync("member");
			if (!this.user) {
				uni.reLaunch({
					url: '../login/login'
				});
			}
			//console.log(this.user,'user');
		},
		onReady() {
			this.getdata();
			this.get_apply_cate();
		},
		methods: {
			sh_sumbit() { //确认审核
				let self = this;
				self.formData.arr_id = self.check_arr;
				// self.formData.ps = self.ps_data;
				console.log(self.formData, 'formData');
				uni.showLoading({
					title: '加载中...'
				});

				let url = '/hzj_apply/arr_approvers_sh'
				self.$boya.NPost(url, self.formData, function(res) {
					console.log('res: ', res);
					uni.hideLoading();
					if (res.code == 200) {
						self.close1();
						uni.showModal({
							title: '提示',
							content: res.data ? res.data : "操作成功.",
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.reLaunch({
										url: './index'
									});
								}
							}
						});
					} else {
						// self.tip_text = "操作失败,请重试,或检查数据";
						self.close1();
						uni.showModal({
							title: '提示',
							content: res.data,
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('失败: ', res);
								}
							}
						});
					}
				}, function(err) {
					console.log('err: ', err);
				})
			},
			arr_sh_open() { //打开审核(弹层)
				let self = this;
				//本身应该有详细判断该申请单是否能够审核
				//......

				console.log(this.check_arr, 'check_arr');
				self.open1();
			},
			imageError: function(e) {
				// console.error('image发生error事件，携带值为' + e.detail.errMsg)
				let self = this;
				self.close1();
				uni.showModal({
					title: '提示',
					content: '多选签名为上一次签名,您无已上传签名,请先进行一次单独审核上传签名'
				});
			},
			//01 居中弹出
			open1: function() {
				this.$refs.guipopup1.open();
			},
			close1: function() {
				this.$refs.guipopup1.close();
			},
			radioChange(evt) { //单选切换
				this.is_radio = evt.detail.value;
				this.formData.is_radio = evt.detail.value;
			},
			// 监听输入框输入事件
			inputting: function(e) {
				var name2Val = e.detail.value;
				console.log(name2Val, 'name2Val');
			},
			chose_arr(is, id) {
				//多选审核
				let self = this;
				if (is) { //添加
					this.check_arr.push(id);
				} else { //移除
					for (let i = 0; i < self.check_arr.length; i++) {
						if (id == self.check_arr[i]) {
							self.check_arr.splice(i, 1);
							return;
						}
					}
				}
				console.log('self.check_arr: ', self.check_arr);
			},
			get_apply_cate() {
				let self = this;
				let url = '/hzj_apply/get_category'
				let parm = {
					c_id: 0
				}
				self.$boya.NPost(url, parm, function(res) {
					if (res.code == 200) {
						self.cate_arr = res.data;
					}
				})
			},
			change2(d) {
				this.data_query.cate_type = d;
				this.pages = 1; //初始化
				this.no_more = false;
				this.getdata();
			},
			change1(d) {
				this.check_arr = [];
				this.data_query.sh_type = d;
				this.pages = 1; //初始化
				this.no_more = false;
				this.getdata();
			},
			to_sh(id) {
				uni.navigateTo({
					url: './sh_detail?id=' + id
				});
			},
			//两对时间选择方法
			changeDate1: function(e) {
				this.star_time = e;
				this.$refs.guipopupright.open();
			},
			changeDate2: function(e) {
				this.end_time = e;
				this.$refs.guipopupright.open();
			},
			openCalendar1: function() {
				this.$refs.guipopupright.close();
				this.$refs.guicalendar1.open();
			},
			openCalendar2: function() {
				this.$refs.guipopupright.close();
				this.$refs.guicalendar2.open();
			},

			getdata(nofirst) {
				this.apiLoadSta = true;
				if (!nofirst) {
					uni.showLoading({
						title: '加载中...'
					});
				}
				let self = this;
				let time = {
					star_time: self.star_time,
					end_time: self.end_time
				}
				// console.log(time, 'time');
				// this.data_query.cate_type = 49
				let url = '/hzj_apply/get_admin_apply'
				let parm = {
					...this.data_query,
					pages: self.pages,
					time: time,
					price: self.price_type,
					// price: 1
				}
				self.$boya.NPost(url, parm, function(res) {
					console.log('res.data: ', res);
					if (res.code != 200) {
						self.no_more = true;
						uni.hideLoading();
						uni.showModal({
							title: '提示',
							content: res.data,
							success() {
								uni.reLaunch({
									url: '../apply/index2'
								});
							}
						});
						return;
					}
					// console.log("当前运行页码" + self.pages);
					// self.pages = self.pages + 1;
					// console.log('审核人员数据: ', res.data.approver.name);

					self.count_data = res.data;
					//self.show_data = res.data.sh_data;

					// let shuju = []
					if (nofirst) { //区分不是第一次
						if (res.data.sh_data.length == 0) {
							self.no_more = true;
						}
						for (var i = 0; i < res.data.sh_data.length; i++) {
							self.show_data.push(res.data.sh_data[i]);
						}
						console.log('news1: ', self.show_data);
					} else {
						self.show_data = res.data.sh_data;
						console.log('news2: ', self.show_data);
					}
					uni.hideLoading();

					let shuju = self.show_data
					for (let i = 0; i < shuju.length; i++) {
						let maxTime = 0;
						let maxPs = null;
						for (let j = 0; j < shuju[i].process.length; j++) {
							if (shuju[i].process[j].ps !== null) {
								let currentTime = new Date(shuju[i].process[j].updated_at).getTime();
								if (currentTime > maxTime) {
									maxTime = currentTime;
									if (shuju[i].process[j].ps.includes("|") == true) {
										maxPs = shuju[i].process[j].ps.split("|")
									} else {
										maxPs = shuju[i].process[j].ps;
									}

								}
							}
						}
						shuju[i].money = maxPs;
					}
					// self.show_data = shuju
					console.log(shuju, 'shuju');

					// 加载完成后停止加载动画
					self.apiLoadSta = false;
					uni.hideLoading();
				})
			},
			reload() {
				let self = this;
				console.log('this.pages: ', this.pages);
				console.log('this.show_data.length: ', this.show_data.length);
				if (this.pages * 10 == this.show_data.length && !this.no_more) {
					console.log('加载更多');
					self.pages = self.pages + 1;
					self.getdata(true);
				} else {
					self.no_more = true;
					self.apiLoadSta = false;
					uni.hideLoading();
					console.log("无更多数据");
				}
			},
			// // 第一个排序
			// showMenu1  : function () {this.show1 = true;},
			// closeMenu1 : function () {this.show1 = false;},
			// select1    : function (index, val) {
			// 	// 获得选择项目后按照数据继续排序即可
			// 	console.log("选择了 " + val);
			// 	this.orderIndex   = 0;
			// 	this.orderByIndex = 0;

			// 	this.pages = 1;//初始化
			// 	this.no_more = false;
			// 	this.getdata();
			// },
			// 最新排序
			orderBySellNumber: function() {
				// 排序逻辑自己来实现
				this.orderIndex = 1;
				this.orderByIndex = 0;
				console.log('最新');
				this.pages = 1; //初始化
				this.no_more = false;
				this.price_type = 0;
				this.getdata();
			},
			// 价格排序
			priceOrder: function(e) {
				console.log(e);
				// 1 为时间顺序 2 为时间倒序 0 为默认排序
				if (e != 0) {
					this.orderIndex = 2;
				}
				this.pages = 1; //初始化
				this.no_more = false;
				this.orderByIndex = e;
				this.price_type = e;
				this.getdata();
			},
			// 展示筛选界面
			showScreening: function() {
				this.$refs.guipopupright.open();
			},
			// // 选择尺寸
			// sedSize : function(e){
			// 	this.sizeSed = e;
			// },
			// 筛选提交
			screeningSubmit: function() {
				//uni.showToast({ icon:"none", title:"请观察控制台" });
				this.check_arr = [];
				// 尺寸
				console.log(this.sizeSed);
				// 价格
				console.log(this.price1, this.price2);
				this.$refs.guipopupright.close();

				this.pages = 1; //初始化
				this.no_more = false;
				this.getdata();
			},
			// 重置筛选
			screeningReset: function() {
				this.price1 = 100;
				this.price2 = 999;

				this.check_arr = [];
				this.data_query = {
					name: '',
					lg_id: '',
					sh_type: 0
				};
				this.pages = 1;
				this.getdata();
			}

		}
	}
</script>

<style>
	.content {
		/* border: #ACACAC solid 1rpx;
		padding: 30rpx; */
		background-color: #F6F6F6;
	}

	.tip {
		color: #acacac;
		text-align: center;
		margin: auto;
		width: 100%;
	}

	.br {
		width: 100%;
		height: 20rpx;
	}

	.demo {
		display: block;
		width: 100%;
		line-height: 60rpx;
		font-size: 28rpx;
		text-align: center;
		margin: 0 2%;
	}

	/* 自定义吸顶元素样式 */
	.fixed-top-view {
		width: 100vw;
		height: 70rpx;
		padding-top: 25rpx;
		display: flex;
		justify-content: space-around;
		background-color: white;
		position: fixed;
	}

	.right-area {
		flex: 1;
		height: 800rpx;
	}

	.colorTags {
		width: 120rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 26rpx;
		color: #FFFFFF;
		border-radius: 5rpx;
	}

	.price-input {
		width: 120rpx;
		padding: 15rpx;
		line-height: 50rpx;
		height: 80rpx;
		font-size: 26rpx;
		text-align: center;
		background-color: #F5F6F8;
		border-radius: 5rpx;
	}

	.right-area-footer {
		width: 580rpx;
		height: 100rpx;
		background-color: #F7F8FA;
	}

	.right-area-footer-btn {
		width: 290rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 28rpx;
		text-align: center;
	}

	.hx_button {
		width: 40%;
		margin: 5%;
		height: 80rpx;
		border-radius: 10rpx;
		line-height: 80rpx;
		color: #fff;
	}

	.dyj_btn {
		width: 25%;
		margin: 0 12%;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 24rpx;
		border-radius: 6rpx;
	}

	.order_content {
		border: #acacac solid 1rpx;
		font-size: 24rpx;
		color: #a3a3a3;
		padding: 20rpx;
		margin-top: 30rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
	}

	.order_content_v {
		margin: 30rpx 0;
	}

	.graceSelectMenuItem {
		width: 200rpx;
	}

	.hx_yuan {
		width: 300rpx;
		height: 300rpx;
		border-radius: 50%;
		border: #ffa0a2 solid 16rpx;
		margin: auto;
		text-align: center;
	}

	.dibu {
		width: 100vw;
		display: flex;
		background-color: white;
		border-top: 1px solid #E8E8E8;
		position: fixed;
		bottom: 0;
	}
</style>